/* 
  1  新建子组件
  2. 在父组件内，设置二级路由规则和挂载点
  3. 👍Swtich组件包住所有的Route组件
*/

import React, { Component } from 'react';
import './index.css';
// HashRouter————带#号
import { HashRouter as Router, Route, Link, Switch } from 'react-router-dom';
export default class App extends Component {
  render() {
    return (
      <div>
        {/* Router负责路由实例化，包裹着所有路由代码 */}
        <Router>
          {/* Link组件，to属性代表我们要跳转的路径，需要以/开头*/}
          <Link to="/">首页</Link> | &nbsp;
          <Link to="/myMusic">我的音乐</Link> | &nbsp;
          <Link to="/myFriend">我的朋友</Link>
          <br />
          {/* 使用Switch包着：匹配到任意一个路径，就会停止匹配 */}
          <Switch>
            <Route path="/" component={Home} exact></Route>
            <Route path="/myMusic" component={MyMusic}></Route>
            {/* 这时候匹配上了，下面的就不会再继续匹配 */}
            <Route path="/myMusic" component={MyMusic}></Route>
            <Route path="/myMusic" component={MyMusic}></Route>
            <Route path="/myFriend" component={MyFriend}></Route>
            {/* 404一定是通配--不写path匹配所有不存在的页面，并且要写在最后面 */}
            <Route component={NotFount}></Route>
          </Switch>
        </Router>
      </div>
    );
  }
}

function NotFount() {
  return <h3>我是NotFount-404页面</h3>;
}
function Home() {
  return <h3>我是首页组件</h3>;
}
function MyMusic() {
  return <h3>我是我的音乐组件</h3>;
}
function MyFriend() {
  return (
    <div>
      <h3>我是我的朋友组件</h3>
      {/* Link组件，to属性代表我们要跳转的路径，需要以/开头*/}
      <Link to="/myFriend">我是MyFriendSon1</Link> | &nbsp;
      <Link to="/myFriend/myFriend2">我是MyFriendSon2</Link> | &nbsp;
      <Link to="/myFriend/myFriend3">我是MyFriendSon3</Link>
      <br />
      {/* 使用Switch包着 */}
      <Switch>
        {/* path配置路由的路径，component挂载组件名 */}
        {/* 只需要写路径即可，不要写 #/home */}
        {/* 父级路由要用模糊匹配，不要用精确匹配 */}
        {/* 子级路由第一个路由需要使用exact精确匹配 */}
        <Route path="/myFriend" component={MyFriendSon1} exact></Route>
        <Route path="/myFriend/myFriend2" component={MyFriendSon2}></Route>
        <Route path="/myFriend/myFriend3" component={MyFriendSon3}></Route>
        {/* 404一定是通配--不写path匹配所有不存在的页面，并且要写在最后面 */}
        <Route component={NotFount}></Route>
      </Switch>
    </div>
  );
}
function MyFriendSon1() {
  return <h3>我是MyFriendSon1</h3>;
}
function MyFriendSon2() {
  return <h3>我是MyFriendSon2</h3>;
}
function MyFriendSon3() {
  return <h3>我是MyFriendSon3</h3>;
}
